<template>
    <!-- 置顶文章 -->
    <div class="content-list">
        <ul class="section-content">
            <li
                class="content-item"
                v-for="(item, index) in contentList"
                :key="index"
                @click="goArticle(item)"
            >
                <div class="box">
                    <!-- 左边图片 -->
                    <img :src="item.articleCover" alt="Image Description" />
                    <div class="content">
                        <!-- 这里可以添加右侧内容 -->
                        <h3>{{ item.articleTitle }}</h3>
                        <p>{{ item.description }}</p>
                        <div class="sub-author-section">
                            <!-- 作者 -->
                            <a href="#" class="author">
                                <i class="el-icon-s-custom"></i>
                                {{ item.userName }}
                            </a>
                            <span class="create-time">
                                <i class="el-icon-date"></i>
                                创建于{{ timestampToTime(item.createTime) }}
                            </span>
                        </div>
                    </div>
                </div>
                <a class="corner-link" href="#">more...</a>
            </li>
        </ul>
    </div>
</template>

<script>
import {timestampToTime} from "@/utils/utils";

export default {
    name: "pinned",
    props: ["contentList"],
    data() {
        return {};
    },
    created() {},
    methods: {
        /**
         * 时间格式化
         */
        timestampToTime(time) {
            return timestampToTime(time);
        },
        goArticle(item) {
            // 视频
            if (item.contentType === 2) {
                this.$router.push({ path: `video-item/${item.id}` });
            } else {
                // 文章详情
                this.$router.push({ path: `article-item/${item.id}` });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/pinned.scss";
</style>
